<template>
<div>
  <div v-if="detail.contentStyle == 2 || detail.contentStyle == 1 || detail.contentStyle == 4">
    <header class="detailImg" v-if="detail.contentStyle == 2 || detail.contentStyle == 4">
      <img v-lazy="detail.headImage" alt="">
    </header>
    <section id="set">
      <h1>{{detail.title}}</h1>
      </section>
      <div :class="{fixedBox:isFixedBox}" class="imgBoxDiv" ref="elememt">
        <div class="nameBox">
          <p class="fl pOne">
            <img :src="user.logoPath" v-if="user.logoPath" alt="">
          </p>
          <p class="fl ptt">
            <font class="provenance fontSize22 color717070">
              <em class="fl">{{user.nickname}}</em>
              <img class="fl" src="../../assets/img/v.png" width="20" />
              <!-- <em class="colorf1891b fl" v-show="isRenzhen">{{detail.newsFrom}}</em>  -->
            </font>
            <font class="provenanceTiem fontSize22"><em class="color717070">{{detail.createTime | dateServer}}</em></font>
          </p>
          <p class="fr subscribe" :class="[focusStatus == 0 ? 'colorFFF' : 'textC backgroundedeeee color5b5e5e']" @click="addOn(detail.publicUserId)">
            <span class="dot fl" v-if="focusStatus == 0"></span>
            {{focusStatus == 0 ? '訂閱' : '已訂閱'}}
          </p>
        </div>
      </div>
      <div class="contentBox fontSize32" v-html="detail.content" :style="htmlTop">
        
      </div>
      
      <section id="set">
        <div class="editorMan textL color717070 fontSize32">
          責任編輯:{{detail.author}}
        </div>
        <ul class="keyword marginTop04">
          <li class="fl color717070" v-for="(item,index) in keyword" :key="index" :class="[index>0 ? 'marginLeft02' : '']">{{item}}</li>
        </ul>
        <div class="giveLikeNum textC fontSize32" @click="dianzan(detail)">
          <!-- colorf08306 -->
          <span class="color5b5e5e">
            <font class="fl" :class="{colorf08306 : detail.exiPraise}">{{detail.praiseCount ? detail.praiseCount : 0}}</font>
            人點贊文章
          </span>
        </div>
    </section>
  </div>
  <div class="bodyColor" @click="fontShow()" v-if="detail.contentStyle == 3">
    <mt-swipe :auto="0" :show-indicators="false" :continuous="false" style="width:100%;" @change="handleChange" :style="bodyHeight">
      <mt-swipe-item class="slide slide1" v-for="(item,index) in contentList" :key="index">
          <div class="imgbox" ref="picHeights" :style="imgHeight">
              <img class="picCenter" id="picHeight" :class="{bigPic:item.big}" @dblclick.stop="bigPicImg(item)" v-lazy.container="item.url" alt="">
          </div>
      </mt-swipe-item>
    </mt-swipe>
    <div class="botTitle" v-show="isFont">
        <div class="bottomBox">
            <div class="indexNum fontSize36 textL">
                <span class="colorf08306">{{indexNum}}</span>/{{contentList.length}}
            </div>
            <div class="colorFFF picTit">
                <span class="textL picOneTit fontSize30">{{indexTitle}}</span>
                <span class="fontSize28 textL">
                    {{indexText}}
                </span>
            </div>   
        </div>
    </div>
  </div>
  </div>
</template>

<script>
import apiDetail from '../../api/detail'
import apiProject from '../../api/project'
export default {
  name: 'detail',
  data () {
    return {
      indexNum:1,
      indexTitle:'',
      indexText:'',
      detail:'',
      focusStatus: '',
      keyword:[],
      // 图片详情
      bodyHeight:{
          height:document.body.clientHeight +'px',
      },
      imgHeight:{
          height:document.body.clientHeight - 80 +'px',
      },
      index:1,
      isFont:true,
      contentList:[],
      isTopThan:true,
      newsType:this.$route.params.newType,
      isV: false,
      isFixedBox:false,
      isFixedHeight:0,
      isRenzhen:false,
      userType:this.$route.params.userType,
      touristsId:'',
      publicUserId: '',
      htmlTop:{
        paddingTop: ''
      },
      elememtOffsetHeight: '',
      user:'',
      userId:this.$route.query.userId,
      tab:this.$route.query.tab,
      fontStyleColor:false
    }
  },
  watch:{
    touristsId(newVal,oldVal){
      if(newVal){
        this.focus(this.publicUserId)
      }
    }
  },
  mounted(){
    window.appLoginId = this.appLoginId
    this.detailList()
    window.addEventListener('scroll',()=>{
          if(window.pageYOffset >= this.isFixedHeight){
            this.isFixedBox = true
            this.htmlTop.paddingTop = '1.3rem'
          }
          if(window.pageYOffset <= this.isFixedHeight){
            this.isFixedBox = false
            this.htmlTop.paddingTop = '.2rem'
          }
    })
  },
  methods:{
    //  接受正常登陆之后的userId
    appLoginId(userId){
      this.userId = userId
      this.tab = ''
    },
    // 获取用户v消息
    isCheck(userId){
      apiDetail.isCheck({userId:userId,userType:this.userType}).then(data => {
        if(data.body.returnMsg != '您还不是注册用户'){
          this.isV = !this.isV
          this.isRenzhen = true
        }
      })
    },
    // 添加历史记录
    readHistory(){
     let self = this
      let parms = {
                  userId:this.userId,
                  newsId:self.$route.params.newId,
                  newsType:self.newsType,
                  userType:self.$route.params.userType,
                  author:self.detail.author,
                  nickname:self.detail.nickname,
                  comCount:self.detail.comCount,
                  title:self.detail.title,
                  coverPath:self.detail.coverPath,
                  pageStyle:self.detail.pageStyle,
                  moduleId:self.detail.moduleId,
                  keywords:self.detail.keyword,
                  }
      apiDetail.readHistory(parms).then(data=>{
        
      })
    },
    // 详情信息  
    detailList(){
      let self = this
      let parms = {id:this.$route.params.newId,userId:this.userId,newsType:this.newsType} 
      apiDetail.listDetail(parms).then(data => {
        if(data.body.data.newsList[0].contentStyle == 1 || data.body.data.newsList[0].contentStyle == 2 || data.body.data.newsList[0].contentStyle == 4){
          self.detail = data.body.data.newsList[0]
          self.keyword = data.body.data.newsList[0].keyword.split(",")
          self.publicUserId  =data.body.data.newsList[0].publicUserId
          self.readHistory()                                                  //  添加历史记录
          self.focus(data.body.data.newsList[0].publicUserId)                 //  判断是否订阅
          // self.isCheck(data.body.data.newsList[0].publicUserId)
          self.$nextTick(()=>{
            self.isFixedHeight = self.$refs.elememt.offsetTop
          })
          self.user = data.body.data.userList[0]
        }else if(data.body.data.newsList[0].contentStyle == 3){
          let content = JSON.parse(data.body.data.newsList[0].content)
          self.detail = data.body.data.newsList[0]
          for(let i=0;i<content.length;i++){ 
              content[i].big = false
              self.contentList.push(content[i])
          }
          self.indexTitle = self.contentList[0].title
          self.indexText = self.contentList[0].text
          self.readHistory()
          self.user = data.body.data.userList[0]
        }
      })
    },
    // 判断是否订阅
    focus(attentionId){
      let parms = {userId:this.userId,attentionId:attentionId}
      apiDetail.newDetailFocusOn(parms).then(data => {
        this.focusStatus = data.body.data.focusStatus
      })
    },
    // 点击订阅
    addOn(attentionId){
        if(this.tab == 4){
          if(this.$isAndroid){
            window.android.isUserPermissions()
          }else if(this.$isiOS){
            window.webkit.messageHandlers.isUserPermissions.postMessage('')
          }
        }else{
          let parms = {userId:this.userId,attentionId:attentionId,focusStatus:this.focusStatus}
          apiDetail.newDetailAddFocus(parms).then(data => {
            this.focusStatus = data.body.data.focusStatus
          })
        }  
    },
    // 点赞
    dianzan(detail){
        if(this.$route.params.newType == '3'){
          let parms = {userId:this.userId,id:this.$route.params.newId,newsType:this.newsType}
          apiDetail.unifycomments(parms).then(data => {
            if(data.body.returnCode == 'ERR_0000'){
              detail.praiseCount = data.body.data
            }
          })
        }else{
          let parms = {userId:this.userId,newsId:this.$route.params.newId,newsType:this.newsType}
          apiDetail.addPraise(parms).then(data => {
            if(data.body.returnCode == 'ERR_0000'){
              detail.praiseCount = data.body.data
              detail.exiPraise = true
            }
          })
        }
    },
    // 图片详情
    // 图片切换index
    handleChange(index){
        this.indexNum = index+1
        this.indexTitle = this.contentList[index].title
        this.indexText = this.contentList[index].text
        if(index == 0){
          this.contentList[0].big = false
        }else{
          this.contentList[index-1].big = false
        }   
    },
    // 点击图片文字消失
    fontShow(){
        this.isFont = !this.isFont
    },
    // 双击图片放大
    bigPicImg(item){
        item.big = !item.big
    }
  }
}
</script>
<style>
    .bodyColor{
        background-color: #3e3a39;
    }
    .contentBox{
        padding: 0 .4rem;
    }
</style>
